<template>
  <div class="section-header text-center">
    <h2>Meet with Our Expert Mentors</h2>
    <p class="style2">
      Minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. duis
      enim velit mollit. Exercitation veniam consequat.
    </p>
  </div>
  <div class="team__wrapper">
    <SwiperSlide
      class="mb-5"
      :dataList="mentors.slice(0, 4)"
      :breakpoints="breakpoints"
      :slidesPerView="slidesPerView"
      :loop="loop"
      :autoplay="autoplayOne"
      :speed="speed"
    >
      <template #content="{ item }">
        <div class="team__item">
          <div class="team__item-inner">
            <div class="team__item-thumb">
              <img :src="item.avatar" alt="Team Image" />
            </div>
            <div class="team__item-content">
              <div class="team__item-author">
                <h6>
                  <nuxt-link to="/mentor-details">{{ item.name }}</nuxt-link>
                </h6>
                <p>{{ item.role }}</p>
              </div>
            </div>
          </div>
        </div>
      </template>
    </SwiperSlide>
    <SwiperSlide
      :dataList="mentors.slice(1, 5)"
      :breakpoints="breakpoints"
      :slidesPerView="slidesPerView"
      :spaceBetween="spaceBetween"
      :loop="loop"
      :autoplay="autoplayTwo"
      :speed="speed"
    >
      <template #content="{ item }">
        <div class="team__item">
          <div class="team__item-inner">
            <div class="team__item-thumb">
              <img :src="item.avatar" alt="Team Image" />
            </div>
            <div class="team__item-content">
              <div class="team__item-author">
                <h6>
                  <nuxt-link to="/mentor-details">{{ item.name }}</nuxt-link>
                </h6>
                <p>{{ item.role }}</p>
              </div>
            </div>
          </div>
        </div>
      </template>
    </SwiperSlide>
    <div class="text-center">
      <nuxt-link to="/mentors" class="trk-btn trk-btn--secondary3 mt-5">
        All Experts <span><i class="fa-solid fa-arrow-right"></i></span>
      </nuxt-link>
    </div>
  </div>
</template>
<script>
import SwiperSlide from "@/components/base/slots/SwiperSlide.vue";
export default {
  components: { SwiperSlide },
  props: {
    mentors: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      slidesPerView: 2,
      grabCursor: true,
      spaceBetween: 24,
      loop: true,
      breakpoints: {
        576: {
          slidesPerView: 2,
        },
        768: {
          slidesPerView: 3,
        },
        992: {
          slidesPerView: 4,
          spaceBetween: 15,
        },
        // 1200: {
        //     slidesPerView: 5,
        //     spaceBetween: 25,
        // },
      },
      autoplayOne: {
        delay: 1,
        disableOnInteraction: true,
      },
      autoplayTwo: {
        delay: 1,
        reverseDirection: true,
        disableOnInteraction: true,
      },
      speed: 5000,
      pagination: false,
    };
  },
};
</script>